<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-09-02 17:55:57
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-10-15 17:11:59
 * @FilePath: \orderApp\components\cu-rate\cu-rate.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="flex flex-items-center">
    <uv-rate
      :count="count"
      :model-value="modelValue"
      :size="size"
      activeColor="#FAD20C"
      @change="changeStar"
    ></uv-rate>

    <text class="txt">{{ starText[modelValue] }}</text>
  </view>
</template>

<script lang="ts" setup>
//

const emits = defineEmits(["update:modelValue", "change"]);

const props = defineProps({
  actColor: {
    type: String,
    default: "#FAD20C",
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  allowHalf: {
    type: Boolean,
    default: false,
  },
  starVal: {
    type: Number,
    default: 0,
  },
  count: {
    type: Number,
    default: 5,
  },
  size: {
    type: String || Number,
    default: 18,
  },
  modelValue: {
    type: Number,
    default: 0,
  },
});

const value = 0;

const starText = reactive(["", "非常差", "差", "一般", "好", "非常好"]);

const changeStar = (val) => {
  emits("update:modelValue", val);
  emits("change");
};
</script>

<style lang="scss" scoped>
//
.txt {
  font-weight: 400;
  font-size: 27rpx;
  color: #969799;
  line-height: 42rpx;
  margin: 0 10rpx;
}
</style>
